<template>
  <div id="window_status_task" @click="openTaskWindow">
    <el-drawer v-model="is_show_window_task" title="任务列表" size="50%" direction="btt">
      <!--    <div>-->
      <!--      <el-button @click="is_show_window_task_info = true">查看任务详细信息</el-button>-->
      <!--      <el-drawer-->
      <!--          v-model="is_show_window_task_info"-->
      <!--          title="任务XXX的详细信息"-->
      <!--          :append-to-body="true"-->
      <!--      >-->
      <!--        <p>_(:зゝ∠)_</p>-->
      <!--      </el-drawer>-->
      <!--    </div>-->
      <div v-for="(v, k) in sessionTaskList" :key="k" class="task-progress">
        <div v-if="get_percent_type(v.session_percent)==='str'">
          <span>{{ v.session_name }}：{{ v.session_percent }}</span>
          <el-progress
              :percentage="100"
              :format="git_status_format"
              :status="get_status(v.session_status)"
              :indeterminate="v.session_status==='running'"
              :duration="5"
              :stroke-width="20"
          >
          </el-progress>
        </div>
        <div v-if="get_percent_type(v.session_percent)==='num'">
          <span>{{ v.session_name }}：{{ v.session_percent }}%</span>
          <el-progress
              :percentage="get_percent_num(v.session_percent)"
              :status="get_status(v.session_status)"
              :stroke-width="20"
          >
            <el-button type="danger" v-if="v.session_status==='running'" text>取消</el-button>
          </el-progress>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import axios from 'axios'
import {ElNotification} from 'element-plus'

export default {
  name: "windowTaskManage",
  props: {
    sessionToken: String,
    // mainWindow_obj
  },
  data() {
    return {
      is_show_window_task: false,
      is_show_window_task_info: false,
      sessionTaskList: [],
    }
  },
  methods: {
    get_status(status) {
      if (status === "waiting") {
        return "warning"
      } else if (status === "stop") {
        return "success"
      } else if (status === "fail") {
        return "exception"
      }
    },
    git_status_format() {
      return '拉取中'
    },
    get_percent_num(percent) {
      return parseInt(percent)
    },
    get_percent_type(percent) {
      let reg = /^\d+$/g;
      let r = percent.toString().match(reg);
      if (r != null && 0 <= this.get_percent_num(percent) <= 100)
        return "num"
      return "str"
    },
    get_session_task_by_session_token() {
      let obj_this = this
      let data = {"session_token": obj_this.sessionToken}
      axios.post('/get_session_task_by_session_token', data).then(function (response) {
        obj_this.sessionTaskList = response.data.data
        obj_this.isTaskRunning()
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    openTaskWindow() {
      this.is_show_window_task = true
    },
    isTaskRunning() {
      for (let i = 0; i < this.sessionTaskList.length; i++) {
        if (this.sessionTaskList[i].session_status === "running") {
          document.getElementById("window_status_task").classList.add("window_status_loading")
          return
        }
      }
      let arr = document.getElementsByClassName("window_status_loading");
      if (arr.length !== 0)
        ElNotification({
          title: "所有任务已完成",
          type: 'success',
        })
      for (let j = 0; j < arr.length; j++) {
        arr[j].classList.remove("window_status_loading");
      }
    }
  },
  mounted() {
    let obj_this = this
    setInterval(() => {
      obj_this.get_session_task_by_session_token()
    }, 1000)
  },
}
</script>

<style scoped>
#window_status_task {
  height: 100%;
  width: 100%;
  cursor: pointer;
  background-color: rgba(128, 128, 128, 0.34);
  transition: 0.5s;
}

#window_status_task:hover {
  background-color: grey;
}


.window_status_loading {
  animation: loading 2s infinite linear;
}

@keyframes loading {
  0% {
    background-color: rgba(128, 128, 128, 0.39)
  }
  50% {
    background-color: grey
  }
  100% {
    background-color: rgba(128, 128, 128, 0.39)
  }
}
</style>